import React from "react";

/**
 * 组件挂载阶段，要执行的钩子函数
 *
 * 触发页面更新的三个条件
 * 1. 组件状态发生改变：setState({})
 * 2. forceUpdate
 * 3. 组件的 props 当中的属性值发生改变。
 */
class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    // 为事件处理程序绑定this
    console.log("1. constructor()");
    this.state = {
      count:0
    }
  }

  handleClick = () => {
    // this.forceUpdate()
    // 改变组件状态
    this.setState({
      count: this.state.count+1
    })
  }

  render() {
    console.log("2. render");
    return (
      <div>
        <h1 id='h1-001'>我是H1标签</h1>
        <button onClick={this.handleClick}>点击次数{this.state.count}</button>
        <Counter count={this.state.count}/>
      </div>
    );
  }

  componentDidMount() {
    // 发送网络请求
    // DOM操作
    console.log("3. componentDidMount()");
  }

  componentDidUpdate() {
    // 发送网络请求
    // DOM操作
    console.log("4. componentDidUpdate()");
    // const h1 = document.getElementById('h1-001')
    // console.log(h1.innerHTML)
  }

}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    console.log("----子组件 1. constructor()");
  }

  render() {
    console.log("----子组件 2. render");
    return (
      <div>
        <h3 id='h3-001'>子组件内容：{this.props.count}</h3>
      </div>
    );
  }

  componentDidMount() {
    console.log("----子组件 3. componentDidMount()");
  }

  componentDidUpdate(prevProps) {
    // const h3 = document.getElementById('h3-001')
    // console.log(h3.innerHTML)
    console.log('----之前的props',prevProps.count)
    console.log('----当前的props',this.props.count)
    if(prevProps.count !== this.props.count){
      this.setState({})
    }
    console.log("----子组件 4. componentDidUpdate()");
  }

  componentWillUnmount() {
    console.log("----子组件 5. componentWillUnmount()");
  }
}

export default App;
